<template>
    <!-- 折线图 -->
    <div ref="chartRef"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";
import funcUtils from "@/utils/func.js";
import https from "@/utils/https.js";
import { useSysStore } from "../../../../store";

const { config } = defineProps({
    config: Object,
});
const chartRef = ref();
const sysStore = useSysStore();

let chart;
let observer = new ResizeObserver(() => {
    chart && chart.resize();
});

onMounted(() => {
    chart = echarts.init(chartRef.value, getTheme());
    observer.observe(chartRef.value);
});

watch(() => config.options, reload, {
    deep: true,
    immediate: true,
});

function getTheme() {
    let userConfig = sysStore.getUserConfig();
    let theme = userConfig.theme;
    let echartsTheme = "light";
    if (theme == "dark") {
        echartsTheme = "dark";
    }
    return echartsTheme;
}

function reload() {
    let options = config.options;
    funcUtils.callFunc(options, {}, { https }).then((resp) => {
        resp.darkMode = getTheme();
        resp.backgroundColor = "";
        chart.setOption(resp, true);
    });
}
</script>

<style lang="scss" scoped></style>
